'use client'
import React, { useEffect, useState } from 'react'
import { PlusOutlined } from '@ant-design/icons'
import dayjs from 'dayjs'
import {
  Breadcrumb,
  Button,
  Col,
  Flex,
  Form,
  Input,
  Row,
  Select,
  Typography,
  DatePicker,
  Table,
  Alert,
  Modal
} from 'antd'
import ImageUpload from '@/components/ImageUpload'
import Amap from '@/components/Amap'
import { sellerVerifyList } from '@/service/seller'
const { RangePicker } = DatePicker

export default function page() {
  // 保存表格中选中的项
  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  // 表格中是否有选中
  const hasSelected = selectedRowKeys.length > 0
  // 保存选择的日期
  const [selectedDate, setSelectedDate] = useState(null)
  // 模态框
  const [isModalOpen, setIsModalOpen] = useState(false)
  // 保存图像上传
  const [imageUrl, setImageUrl] = useState()
  // 保存坐标值
  const [position, setPosition] = useState({
    longitude: 116.397428,
    latitude: 39.90923
  })
  // 预设日期
  const rangePresets = [
    {
      label: '最近一周',
      value: [dayjs().add(-7, 'd'), dayjs()]
    },
    {
      label: '最近一个月',
      value: [dayjs().add(-30, 'd'), dayjs()]
    },
    {
      label: '最近三个月',
      value: [dayjs().add(-90, 'd'), dayjs()]
    }
  ]
  // 日期切换获取日期
  const onRangeChange = (dates, dateStrings) => {
    if (dates) {
      console.log('From: ', dates[0], ', to: ', dates[1])
      console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
      setSelectedDate(dates)
      console.log(dates)
    } else {
      console.log('Clear')
    }
  }
  // 重置日期
  const handleReset = () => {
    setSelectedDate(null)
  }
  // 点击模态框
  const handleOk = () => {
    setIsModalOpen(false)
  }
  const handleCancel = () => {
    setIsModalOpen(false)
  }
  useEffect(() => {
    ;(async () => {
      const res = await sellerVerifyList()
      console.log(res)
    })()
  })

  return (
    <>
      <Row className="breadcrumb">
        <Col span={24}>
          <Breadcrumb
            items={[
              { title: '首页' },
              { title: '商家管理' },
              { title: '商家审核' }
            ]}
          />
        </Col>
      </Row>
      <Row className="info">
        <Col span={24}>
          <Flex justify={'space-between'}>
            <Typography.Title level={4}>信息管理</Typography.Title>
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={() => setIsModalOpen(true)}
            >
              新增商家
            </Button>
          </Flex>
        </Col>
      </Row>
      <Row className="container">
        <Col span={24}>
          <Form layout="inline">
            <Form.Item label="商家名称：" name="seller_name">
              <Input />
            </Form.Item>
            <Form.Item label="负责人联系方式：" name="">
              <Input type="phone" />
            </Form.Item>
            <Form.Item label="审核状态：" name="sh" initialValue={'0'}>
              <Select
                style={{ width: 120 }}
                onChange={() => {}}
                options={[
                  {
                    value: '0',
                    label: '全部'
                  },
                  {
                    value: '1',
                    label: '待审批'
                  },
                  {
                    value: '2',
                    label: '不通过'
                  }
                ]}
              />
            </Form.Item>
            <Form.Item label="申请日期">
              <RangePicker
                value={selectedDate}
                presets={rangePresets}
                onChange={onRangeChange}
              />
            </Form.Item>
            <Form.Item>
              <Button type="default" htmlType="reset" onClick={handleReset}>
                重置
              </Button>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
            </Form.Item>
          </Form>
        </Col>
      </Row>
      <Row className="container">
        <Col span={24}>
          <Typography.Paragraph style={{ fontSize: 16 }}>
            商家列表
          </Typography.Paragraph>
          {hasSelected && (
            <Alert
              message={`已经选择 ${selectedRowKeys.length} 项`}
              type="info"
              showIcon
            />
          )}
        </Col>
        <Col span={24}>
          <Table
            rowSelection={{
              selectedRowKeys,
              onChange: (newSelectedRowKeys) => {
                console.log('selectedRowKeys changed: ', newSelectedRowKeys)
                setSelectedRowKeys(newSelectedRowKeys)
              }
            }}
            dataSource={[
              {
                key: '1',
                name: '胡彦斌',
                age: 32,
                address: '西湖区湖底公园1号'
              },
              {
                key: '2',
                name: '胡彦祖',
                age: 42,
                address: '西湖区湖底公园1号'
              }
            ]}
            columns={[
              {
                title: '姓名',
                dataIndex: 'name',
                key: 'name'
              },
              {
                title: '年龄',
                dataIndex: 'age',
                key: 'age'
              },
              {
                title: '住址',
                dataIndex: 'address',
                key: 'address'
              }
            ]}
          />
        </Col>
      </Row>
      {/* 模态框 */}
      <Modal
        title="新增商家"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        maskClosable={false}
        width={700}
        destroyOnClose
      >
        <Form onFinish={() => {}} layout="vertical">
          <Row>
            <Col span={12}>
              <Form.Item label="商家名称">
                <Input placeholder="请输入商家名称" />
              </Form.Item>
            </Col>
            <Col span={11} offset={1}>
              <Form.Item label="行业类型" name="">
                <Select
                  placeholder="请选择行业"
                  onChange={() => {}}
                  options={[
                    {
                      value: '0',
                      label: '餐饮'
                    },
                    {
                      value: '1',
                      label: '体育'
                    },
                    {
                      value: '2',
                      label: '娱乐'
                    }
                  ]}
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="负责人">
                <Input placeholder="请输入负责人" />
              </Form.Item>
            </Col>
            <Col span={11} offset={1}>
              <Form.Item label="负责人电话" name="">
                <Input placeholder="请输入负责人电话" />
              </Form.Item>
            </Col>
            <Col span={24} style={{ marginBottom: 10 }}>
              <Form.Item label="公司地址(点击地图获取坐标)" name="addr">
                <div
                  style={{
                    width: '100%',
                    height: 34,
                    padding: 5,
                    border: '1px solid #D9D9D9',
                    borderRadius: 5
                  }}
                >
                  {position.longitude}, {position.latitude}
                </div>
              </Form.Item>
              <Amap
                width="100%"
                height="200"
                position={position}
                setPosition={setPosition}
              />
            </Col>
            <Col span={24}>
              <Form.Item label="营业执照" name="">
                <ImageUpload imageUrl={imageUrl} setImageUrl={setImageUrl} />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item label="商家简介" name="profile">
                <Input.TextArea placeholder="请输入商家简介" />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    </>
  )
}
